<template>
  <div>
    <div class="editbox-pop-btn" @click="editTable">
      <div v-show="!showTable">
        <i class="el-icon-document editbox-pop-icon" ></i>
        <p class="editbox-pop-text ft-14">参数</p>
      </div>
    </div>
    <div class="editbox-pop-table" v-show="showTable">
      <div class="editbox-pop-arrow cursor-hand" @click="closeShow">
      </div>
      <div v-html="tableData"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    row: Object
  },
  data () {
    return {
      showTable: false,
      tableData: ''
    }
  },
  watch: {
  },
  computed: {
  },
  mounted () {
  },
  async created () {
    // this.getDetail()
  },
  methods: {
    closeShow () {
      this.showTable = false
    },
    editTable () {
      this.showTable = !this.showTable
      if (this.showTable) {
        this.getDetail()
      }
    },
    getDetail () {
      const params = {
        transCode: 'POSB0004',
        ...this.row
      }
      this.$axios({
        data: params
      }).then(res => {
        if (res.respCode !== '200') {
          this.$message({ message: res.respMsg, type: 'error' })
          return ''
        }
        // console.log(res, 'res')
        this.tableData = res.respData.contHTML
      }).catch(err => {
        console.log(err)
      })
    }
  },
  destroyed () {
  }
}
</script>
<style lang="less" scoped>
.editbox-pop-btn{
  position: fixed;
  z-index: 999;
  top:45%;
  right:17px;
  width: 53px;
  height: 60px;
  background: #fff;
  border-radius: 2px;
  color:#2E2E2E;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  box-shadow: -10px 4px 10px #E1E1E1;
  border-top-left-radius:10px;
  border-bottom-left-radius: 10px;
  .editbox-pop-icon{
    margin-top:10px;
  }
  .editbox-pop-arrow{
    margin-top:10px;
    border:2px solid #fff;
    border-radius: 50%;
    font-size:16px;
  }
}
.editbox-pop-table{
  position: fixed;
  z-index: 999;
  top:0;
  right:0;
  width: 500px;
  padding-left:10px;
  height: 100%;
  padding:15px;
  background: #fff;
  box-shadow: -10px 0px 15px #E9EAEC;
  .editbox-pop-arrow{
    position: relative;
    top:50%;
    margin-top:-42px;
    left:-53px;
    width: 38px;
    height: 75px;
  }
}
</style>
